{% load static %}
<!DOCTYPE html>
<html class="wide wow-animation" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{% block title %}Meet活动聚 - 本地兴趣活动共享平台{% endblock %}</title>

    <!-- 公共样式 -->
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Poppins:300,400,500">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/css/index_css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/index_css/fonts.css">
    <link rel="stylesheet" href="/static/css/index_css/style.css">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <style>
          /* 自定义样式 */
      .rd-navbar-brand {
        display: flex;
        align-items: center;
      }

      .brand-text {
        font-family: 'Comic Sans MS', sans-serif;
        font-weight: 500;
        font-size: 34px;
        color: #333;
        margin-left: 12px;
        letter-spacing: 1px;
      }
      /* 导航栏激活状态样式 */
.rd-nav-item.active .rd-nav-link {
    position: relative;
}

.rd-nav-item.active .rd-nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 60%;
    height: 2px;
    background-color: #efede9;
    border-radius: 1px;
}
      </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 页面加载器 -->
    <div class="preloader">
        <div class="preloader-body">
            <div class="cssload-container"><span></span><span></span><span></span><span></span></div>
        </div>
    </div>

    <div class="page">
        <!-- 页面头部 -->
        <header class="section page-header">
            <!-- 导航栏 -->
            <div class="rd-navbar-wrap rd-navbar-modern-wrap">
                <nav class="rd-navbar rd-navbar-modern" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed"
                     data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed"
                     data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed"
                     data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static"
                     data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static"
                     data-lg-stick-up-offset="46px" data-xl-stick-up-offset="46px"
                     data-xxl-stick-up-offset="70px" data-lg-stick-up="true"
                     data-xl-stick-up="true" data-xxl-stick-up="true">
                    <div class="rd-navbar-main-outer">
                        <div class="rd-navbar-main">
                            <!-- 导航栏面板 -->
                            <div class="rd-navbar-panel">
                                <!-- 导航栏切换按钮 -->
                                <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap">
                                    <span></span>
                                </button>
                                 <a href="{% url 'home' %}" style="text-decoration: none; /* 消除链接下划线 */">
                                    <div class="rd-navbar-brand">
                                        <!-- Logo SVG -->
                                        <svg style="border-radius: 50%;background-color: #ffffff;" width="80px" height="80px" viewBox="0 0 256 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
                                          <title>Baseline</title>
                                          <g>
                                            <polygon fill="#99DBB1" points="182.918378 35.0449089 220.954789 73.0813201 183.345088 110.691626 159.83978 87.1857136 142.316872 104.707413 165.823389 128.213325 183.345088 145.736232 256 73.0813201 238.477092 55.5596211 200.440681 17.5226056"></polygon>
                                            <polygon fill="#99DBB3" points="72.6546102 3.43564427e-14 17.0952913 55.5593189 34.6175947 73.0816223 72.6546102 35.0446067 96.1605224 58.5505189 113.682826 41.02882 90.1769136 17.5229078"></polygon>
                                            <polygon fill="#008F32" points="73.0816223 110.691324 17.5229078 55.1320046 3.43564427e-14 72.654308 73.0816223 145.73593 90.1766114 128.640941 90.6045301 128.213627 200.867935 17.9496177 183.345632 0.427314287"></polygon>
                                          </g>
                                        </svg>
                                        <!-- 标题 -->
                                        <span class="brand-text">Meet</span> <!-- 原a标签改为span，避免嵌套链接 -->
                                    </div>
                                </a>
                            </div>

                            <div class="rd-navbar-main-element">
                                <div class="rd-navbar-nav-wrap">
                                    <!-- 主导航菜单 -->
                                    <ul class="rd-navbar-nav">
                                        <li class="rd-nav-item {% if request.resolver_match.url_name == 'home' %}active{% endif %}">
                                            <a class="rd-nav-link" href="{% url 'home' %}">首页</a>
                                        </li>
                                        <li class="rd-nav-item {% if 'activity_list' in request.resolver_match.url_name %}active{% endif %}">
                                            <a class="rd-nav-link" href="{% url 'activities:activity_list' %}">活动列表</a>
                                        </li>
                                        <li class="rd-nav-item {% if 'activity_create' in request.resolver_match.url_name %}active{% endif %}">
                                            <a class="rd-nav-link" href="{% url 'activities:activity_create' %}">创建活动</a>
                                        </li>
                                        <li class="rd-nav-item {% if 'rewards_shop' in request.resolver_match.url_name %}active{% endif %}">
                                            <a class="rd-nav-link" href="{% url 'points:rewards_shop' %}">积分商城</a>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 用户菜单区域 -->
                                <div class="rd-navbar-project-hamburger" data-multitoggle=".rd-navbar-main"
                                     data-multitoggle-blur=".rd-navbar-wrap" data-multitoggle-isolate>
                                    <div class="project-hamburger">
                                        <span class="project-hamburger-arrow-top"></span>
                                        <span class="project-hamburger-arrow-center"></span>
                                        <span class="project-hamburger-arrow-bottom"></span>
                                    </div>
                                    <div class="project-hamburger-2">
                                        <span class="project-hamburger-arrow"></span>
                                        <span class="project-hamburger-arrow"></span>
                                        <span class="project-hamburger-arrow"></span>
                                    </div>
                                    <div class="project-close"><span></span><span></span></div>
                                </div>
                            </div>

                            <!-- 用户侧边栏信息 -->
                            <div class="rd-navbar-project rd-navbar-modern-project">
                                <div class="rd-navbar-project-modern-header">
                                    <h4 class="rd-navbar-project-modern-title">
                                        {% if user.is_authenticated %}
                                            {{ user.nickname|default:user.username }} 的中心
                                        {% else %}
                                            用户中心
                                        {% endif %}
                                    </h4>
                                    <div class="rd-navbar-project-hamburger" data-multitoggle=".rd-navbar-main"
                                         data-multitoggle-blur=".rd-navbar-wrap" data-multitoggle-isolate>
                                        <div class="project-close">X</div>
                                    </div>
                                </div>
                                <div class="rd-navbar-project-content rd-navbar-modern-project-content">
                                    <div>
                                        {% if user.is_authenticated %}
                                            <ul class="rd-navbar-modern-contacts">
                                                <li>
                                                    <a class="link" href="{% url 'points:points_home' %}">
                                                        <i class="bi bi-coin"></i> 我的积分
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="link" href="{% url 'social:chat_main' %}">
                                                        <i class="bi bi-envelope"></i> 消息中心
                                                        <span id="nav-unread-badge" class="badge rounded-pill bg-danger"
                                                              style="display: none; font-size: 0.6rem; margin-left: 5px;">
                                                            0
                                                        </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="link" href="{% url 'users:profile' %}">
                                                        <i class="bi bi-person-circle"></i> 个人中心
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="link" href="{% url 'users:my_activities' %}">
                                                        <i class="bi bi-list-ul"></i> 我的活动
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="link" href="{% url 'users:my_registrations' %}">
                                                        <i class="bi bi-check2-all"></i> 我的报名
                                                    </a>
                                                </li>
                                                {% if user.is_admin_user %}
                                                <li>
                                                    <a class="link" href="/dashboard/">
                                                        <i class="bi bi-gear"></i> 管理后台
                                                    </a>
                                                </li>
                                                {% endif %}
                                                <li>
                                                    <a class="link" href="{% url 'users:logout' %}">
                                                        <i class="bi bi-box-arrow-right"></i> 退出登录
                                                    </a>
                                                </li>
                                            </ul>
                                        {% else %}
                                            <div class="text-center mb-4">
                                                <p>请登录以获取更好的体验</p>
                                                <a class="button button-primary" href="{% url 'users:login' %}">
                                                    <i class="bi bi-box-arrow-in-right"></i> 登录
                                                </a>
                                                <a class="button button-secondary" href="{% url 'users:register' %}">
                                                    <i class="bi bi-person-plus"></i> 注册
                                                </a>
                                            </div>
                                        {% endif %}

                                        <!-- 社交媒体链接 -->
                                        <ul class="list-inline rd-navbar-modern-list-social mt-4">
                                            <li><a class="icon fa fa-facebook" href="#"></a></li>
                                            <li><a class="icon fa fa-twitter" href="#"></a></li>
                                            <li><a class="icon fa fa-google-plus" href="#"></a></li>
                                            <li><a class="icon fa fa-instagram" href="#"></a></li>
                                            <li><a class="icon fa fa-pinterest" href="#"></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </header>

        <!-- 消息提示 -->
        {% if messages %}
        <div class="container mt-3">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- 主内容 -->
        <main class="py-4">
            {% block content %}{% endblock %}
        </main>

        <!-- 页脚 -->
        <footer class="section footer-variant-2 footer-modern context-dark section-top-image section-top-image-dark">
            <div class="footer-variant-2-content">
                <div class="container">
                    <div class="row row-40 justify-content-between">
                        <!-- 公司信息 -->
                        <div class="col-sm-6 col-lg-4 col-xl-3">
                            <div class="oh-desktop">
                                <div class="wow slideInRight" data-wow-delay="0s">
                                    <div class="footer-brand">
                                        <a href={% url 'home' %}>
                                            <svg style="" width="80px" height="50px" viewBox="0 0 256 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
                                                  <title>Baseline</title>
                                                  <g>
                                                    <polygon fill="#99DBB1" points="182.918378 35.0449089 220.954789 73.0813201 183.345088 110.691626 159.83978 87.1857136 142.316872 104.707413 165.823389 128.213325 183.345088 145.736232 256 73.0813201 238.477092 55.5596211 200.440681 17.5226056"></polygon>
                                                    <polygon fill="#99DBB3" points="72.6546102 3.43564427e-14 17.0952913 55.5593189 34.6175947 73.0816223 72.6546102 35.0446067 96.1605224 58.5505189 113.682826 41.02882 90.1769136 17.5229078"></polygon>
                                                    <polygon fill="#008F32" points="73.0816223 110.691324 17.5229078 55.1320046 3.43564427e-14 72.654308 73.0816223 145.73593 90.1766114 128.640941 90.6045301 128.213627 200.867935 17.9496177 183.345632 0.427314287"></polygon>
                                                  </g>
                                                </svg>
                                            <h5 style="color: #529046">Meet 活动聚 Meet</h5>
                                        </a>
                                    </div>
                                    <p>在这里，每个周末都不再单调，每个夜晚都充满可能。</p>
                                    <ul class="footer-contacts d-inline-block d-md-block">
                                        <li>
                                            <div class="unit unit-spacing-xs">
                                                <div class="unit-left"><span class="icon fa fa-phone"></span></div>
                                                <div class="unit-body"><a class="link-phone" href="tel:#">+1 323-913-4688</a></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="unit unit-spacing-xs">
                                                <div class="unit-left"><span class="icon fa fa-clock-o"></span></div>
                                                <div class="unit-body">
                                                    <p>周一至周五: 09:00 - 17:00</p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- 新闻通讯 -->
                        <div class="col-sm-6 col-lg-4 col-xl-4">
                            <div class="oh-desktop">
                                <div class="inset-top-18 wow slideInDown" data-wow-delay="0s">
                                    <h5>新闻通讯</h5>
                                    <p>订阅我们的电子邮件通讯，获取最新资讯和提示。</p>
                                    <form class="rd-form rd-mailform" data-form-output="form-output-global"
                                          data-form-type="subscribe" method="post" action="#">
                                        <div class="form-wrap">
                                            <input class="form-input" id="subscribe-email" type="email" name="email"
                                                  data-constraints="@Email @Required">
                                            <label class="form-label" for="subscribe-email">输入您的电子邮箱</label>
                                        </div>
                                        <button class="button button-block button-white" type="submit">订阅</button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- 快速链接 -->
                        <div class="col-lg-3 col-xl-3">
                            <div class="oh-desktop">
                                <div class="inset-top-18 wow slideInLeft" data-wow-delay="0s">
                                    <h5>快速链接</h5>
                                    <ul class="footer-contacts">
                                        <li><a href="{% url 'activities:activity_list' %}">活动列表</a></li>
                                        <li><a href="{% url 'activities:activity_create' %}">创建活动</a></li>
                                        <li><a href="{% url 'points:rewards_shop' %}">积分商城</a></li>
                                        <li><a href="#">关于我们</a></li>
                                        <li><a href="#">联系我们</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- 全局邮件表单输出 -->
    <div class="snackbars" id="form-output-global"></div>

    <!-- JavaScript文件 -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="/static/js/index_js/core.min.js"></script>
    <script src="/static/js/index_js/script.js"></script>
    <script src="{% static 'js/main.js' %}"></script>

    {% if user.is_authenticated %}
    <!-- Global WebSocket and Notification System -->
    <script>
        // WebSocket连接
        let notificationSocket = null;
        let reconnectAttempts = 0;
        const maxReconnectAttempts = 5;

        // 连接WebSocket
        function connectNotificationWebSocket() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}/ws/notifications/`;

            notificationSocket = new WebSocket(wsUrl);

            notificationSocket.onopen = function(e) {
                console.log('通知WebSocket连接已建立');
                reconnectAttempts = 0;
                // 连接成功后立即更新未读计数
                updateUnreadCounts();
            };

            notificationSocket.onmessage = function(e) {
                const data = JSON.parse(e.data);
                console.log('收到通知:', data);

                // 处理不同类型的通知
                if (data.type === 'new_message') {
                    // 新消息通知
                    updateUnreadCounts();
                    showNotificationToast('新消息', data.message.sender.nickname + ': ' + data.message.content);
                } else if (data.type === 'notification') {
                    // 系统通知
                    updateUnreadCounts();
                    showNotificationToast('系统通知', data.notification.title);
                } else if (data.type === 'conversation_update') {
                    // 会话更新
                    updateUnreadCounts();
                }
            };

            notificationSocket.onclose = function(e) {
                console.log('通知WebSocket连接已关闭');
                // 尝试重连
                if (reconnectAttempts < maxReconnectAttempts) {
                    reconnectAttempts++;
                    console.log(`尝试重连... (${reconnectAttempts}/${maxReconnectAttempts})`);
                    setTimeout(connectNotificationWebSocket, 3000 * reconnectAttempts);
                }
            };

            notificationSocket.onerror = function(e) {
                console.error('WebSocket错误:', e);
            };
        }

        // 使用axios更新未读计数
        function updateUnreadCounts() {
            axios.get('/social/api/unread-counts/')
                .then(response => {
                    if (response.data.success) {
                        const data = response.data;
                        const total = data.total;

                        // 更新导航栏徽章
                        const badge = document.getElementById('nav-unread-badge');
                        if (badge) {
                            if (total > 0) {
                                badge.textContent = total > 99 ? '99+' : total;
                                badge.style.display = 'inline-block';
                            } else {
                                badge.style.display = 'none';
                            }
                        }

                        // 触发自定义事件，让聊天页面可以监听
                        const event = new CustomEvent('unreadCountsUpdated', {
                            detail: data
                        });
                        window.dispatchEvent(event);
                    }
                })
                .catch(error => {
                    console.error('获取未读计数失败:', error);
                });
        }

        // 显示通知提示
        function showNotificationToast(title, message) {
            // 检查是否支持浏览器通知
            if ('Notification' in window && Notification.permission === 'granted') {
                new Notification(title, {
                    body: message,
                    icon: '/static/imgs/logo.png'
                });
            }

            // 同时显示页面内提示
            const toastHtml = `
                <div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 80px; right: 20px; z-index: 9999;">
                    <div class="d-flex">
                        <div class="toast-body">
                            <strong>${title}</strong><br>
                            ${message}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            `;

            const toastContainer = document.createElement('div');
            toastContainer.innerHTML = toastHtml;
            document.body.appendChild(toastContainer);

            const toastElement = toastContainer.querySelector('.toast');
            const toast = new bootstrap.Toast(toastElement, { autohide: true, delay: 5000 });
            toast.show();

            // 移除toast元素
            toastElement.addEventListener('hidden.bs.toast', function() {
                toastContainer.remove();
            });
        }

        // 请求浏览器通知权限
        function requestNotificationPermission() {
            if ('Notification' in window && Notification.permission === 'default') {
                Notification.requestPermission();
            }
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 连接WebSocket
            connectNotificationWebSocket();

            // 初始加载未读计数
            updateUnreadCounts();

            // 定期更新未读计数（每30秒）
            setInterval(updateUnreadCounts, 30000);

            // 请求通知权限
            requestNotificationPermission();
        });

        // 页面可见性变化时更新
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                updateUnreadCounts();
            }
        });
    </script>
    {% endif %}

    {% block extra_js %}{% endblock %}
</body>
</html>